<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>美食</title>
		<style type="text/css">
			#main {
				width: 400px;
				height: 600px;
				border: 1px solid darkgray;
				border-radius: 50px;
				position: relative;
			}
			
			#more {
				position: absolute;
				top: 55px;
				right: 30px;
				width: 60px;
				height: 20px;
			}
			
			#picture {
				list-style: none;
				float: left;
				margin-left: 10px;
			}
			#picture li img{
				height: 80px;
				width: 120px;
				margin-top: 26px;
			}
			#text {
				margin-right: 30px;
				float: right;
				list-style: none;
			}
		</style>
	</head>

	<body>
		<div id="main">
			
			<p style="color: red;font-size: 22px;margin-top: 50px;margin-left: 60px;">SHOP<span style="color: black;"> 今日推荐</span><img src="../img/more.gif" id="more"></p>
			<ul id="picture">
				<li style="position: relative;"><img src="../img/img9.gif" ><img src="../img/shen.png"style="position: absolute;right: -20px;top: -10px;width: 50px;height: 50px;"></li>
				<li><img src="../img/img7.gif"></li>
				<li><img src="../img/img8.gif"></li>
				<li><img src="../img/img7.gif"></li>
			</ul>
			<ul id="text">
				<li>
					<p>
					<a href="#" style="color: red;">汉来国际美食百货</a></p>
					<p style="color: darkgray;">口味：创意中餐</p>
					<p style="color: darkgray;">区域：朝阳/CBD</p>
				</li>
				<li>
					<p>
					<a href="#" style="color: red;">汉来国际美食百货</a></p>
					<p style="color: darkgray;">口味：创意中餐</p>
					<p style="color: darkgray;">区域：朝阳/CBD</p>
				</li>
				<li>
					<p>
					<a href="#" style="color: red;">汉来国际美食百货</a></p>
					<p style="color: darkgray;">口味：创意中餐</p>
					<p style="color: darkgray;">区域：朝阳/CBD</p>
				</li>
				<li>
					<p>
					<a href="#" style="color: red;">汉来国际美食百货</a></p>
					<p style="color: darkgray;">口味：创意中餐</p>
					<p style="color: darkgray;">区域：朝阳/CBD</p>
				</li>
				
			</ul>
		</div>
	</body>

</html>